<template>
  <div class="dashboard-container">
    <!-- 数据统计 -->
    <el-row :gutter="10">
      <!-- 访客数(UV) -->
      <el-col :span="8">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                </div>
              </template>
              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between">
                  <span class="text-gray">线上收入总金额</span>
                </div>
              </template>
              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ info.total_online_money }}</span>
                </div>
              </div>
            </el-card>
          </template>
        </el-skeleton>
      </el-col>
      <el-col :span="8">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                </div>
              </template>
              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between">
                  <span class="text-gray">线下收入总金额</span>
                </div>
              </template>
              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ info.total_offline_money }}</span>
                </div>
              </div>
            </el-card>
          </template>
        </el-skeleton>
      </el-col>
      <el-col :span="8">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                </div>
              </template>
              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between">
                  <span class="text-gray">总收入金额</span>
                </div>
              </template>
              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ info.total_money }}</span>
                </div>
              </div>
            </el-card>
          </template>
        </el-skeleton>
      </el-col>

      <el-col :span="24">
        <div class="mt-5 mb-1">当月收入</div>
      </el-col>

      <el-col :span="8">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                </div>
              </template>
              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between h-[32px]">
                  <span class="text-gray">线上总金额</span>
                </div>
              </template>
              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ info?.money_month?.total_online_fee }}</span>
                </div>
              </div>
            </el-card>
          </template>
        </el-skeleton>
      </el-col>
      <el-col :span="8">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                </div>
              </template>
              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between h-[32px]">
                  <span class="text-gray">线下总金额</span>
                  <exportFile type="offline_order_this_month" :data="{ pay_plat: 50 }"></exportFile>
                </div>
              </template>
              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ info?.money_month?.total_offline_fee }}</span>
                </div>
              </div>
            </el-card>
          </template>
        </el-skeleton>
      </el-col>
      <el-col :span="8">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                </div>
              </template>
              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between h-[32px]">
                  <span class="text-gray">总金额</span>
                </div>
              </template>
              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ info?.money_month?.total_amount }}</span>
                </div>
              </div>
            </el-card>
          </template>
        </el-skeleton>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mt-5">
      <!-- 访问趋势统计图 -->
      <el-col :xs="24" :span="16">
        <el-card>
          <el-button @click="isVisible = true">当月抄表情况</el-button>
          <div ref="barChart" style="width: 100%; height: 380px;"></div>
        </el-card>
      </el-col>
      <!-- 通知公告 -->
      <el-col :xs="24" :span="8">
        <div class="mb-1">当月抄表账单</div>
        <el-row :gutter="20">
          <el-col :span="12" class="mb-3">
            <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
              <template #template>
                <el-card>
                  <template #header>
                    <div>
                      <el-skeleton-item variant="h3" style="width: 40%" />
                    </div>
                  </template>
                  <div class="flex-x-between">
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </el-card>
              </template>
              <template v-if="!visitStatsLoading">
                <el-card shadow="never">
                  <template #header>
                    <div class="flex-x-between">
                      <span class="text-gray">总用水量 m³</span>
                    </div>
                  </template>
                  <div class="flex-x-between mt-2">
                    <div class="flex-y-center">
                      <span class="text-lg">{{ info?.water_bill?.sum_consumption ?? 0 }}</span>
                    </div>
                  </div>
                </el-card>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :span="12" class="mb-3">
            <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
              <template #template>
                <el-card>
                  <template #header>
                    <div>
                      <el-skeleton-item variant="h3" style="width: 40%" />
                    </div>
                  </template>
                  <div class="flex-x-between">
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </el-card>
              </template>
              <template v-if="!visitStatsLoading">
                <el-card shadow="never">
                  <template #header>
                    <div class="flex-x-between">
                      <span class="text-gray">综合水费+污水处理费</span>
                    </div>
                  </template>
                  <div class="flex-x-between mt-2">
                    <div class="flex-y-center">
                      <span class="text-lg">{{ info?.water_bill?.sum_water_fee_base ?? 0 }}</span>
                    </div>
                  </div>
                </el-card>
              </template>
            </el-skeleton>
          </el-col>

          <el-col :span="12" class="mb-3">
            <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
              <template #template>
                <el-card>
                  <template #header>
                    <div>
                      <el-skeleton-item variant="h3" style="width: 40%" />
                    </div>
                  </template>
                  <div class="flex-x-between">
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </el-card>
              </template>
              <template v-if="!visitStatsLoading">
                <el-card shadow="never">
                  <template #header>
                    <div class="flex-x-between">
                      <span class="text-gray">综合水费</span>
                    </div>
                  </template>
                  <div class="flex-x-between mt-2">
                    <div class="flex-y-center">
                      <span class="text-lg">{{ info?.water_bill?.sum_com_fee ?? 0 }}</span>
                    </div>
                  </div>
                </el-card>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :span="12" class="mb-3">
            <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
              <template #template>
                <el-card>
                  <template #header>
                    <div>
                      <el-skeleton-item variant="h3" style="width: 40%" />
                    </div>
                  </template>
                  <div class="flex-x-between">
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </el-card>
              </template>
              <template v-if="!visitStatsLoading">
                <el-card shadow="never">
                  <template #header>
                    <div class="flex-x-between">
                      <span class="text-gray">污水处理费</span>
                    </div>
                  </template>
                  <div class="flex-x-between mt-2">
                    <div class="flex-y-center">
                      <span class="text-lg">{{ info?.water_bill?.sum_sewage_treat_fee ?? 0 }}</span>
                    </div>
                  </div>
                </el-card>
              </template>
            </el-skeleton>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog v-model="isVisible" title="当月抄表情况" width="70%">
      <el-table v-loading="loading" :data="pageData">
        <el-table-column label="小区" prop="area_name" />
        <el-table-column label="水表总数" prop="meter_cnt" width="140" />
        <el-table-column label="已超表数量" prop="post_cnt" width="140" />
        <el-table-column label="未抄表数量" prop="not_post_cnt" width="140" />
        <el-table-column label="已结清总额" prop="settle_water_fee" width="140" />
        <el-table-column label="未结清总额" prop="unsettle_water_fee" width="140" />
        <el-table-column label="抄表水费总金额" prop="sum_water_fee" width="150" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Dashboard",
  inheritAttrs: false,
});
import LogAPI from "@/api/system/log";
import * as echarts from 'echarts';

const barChart = ref(null);
let myChart: any = null;


onUnmounted(() => {
  if (myChart) {
    myChart.dispose(); // 销毁实例，释放资源
  }
});

const isVisible = ref(false);

const info = ref<any>({});
const visitStatsLoading = ref(false);
const loading = ref(true);
const pageData = ref([]);
const getDataInfo = () => {
  LogAPI.getDashboard().then((res: any) => {
    info.value = res;
    visitStatsLoading.value = false;
    loading.value = false;
    pageData.value = res.cnt_group_by_area

    const xAxisArr: any = [];
    const source: any = [];
    res.cnt_group_by_area.map((item: any) => {
      xAxisArr.push(item.area_name);
      source.push({
        area_name: item.area_name,
        '水表总数': item.meter_cnt,
        '已抄表数量': item.post_cnt,
        '未抄表数量': item.not_post_cnt,
      });
    });

    if (barChart.value) {
      myChart = echarts.init(barChart.value);
      const option = {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['area_name', '水表总数', '已抄表数量', '未抄表数量'],
          source: source
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      };
      myChart.setOption(option);
    }
  })
}

onMounted(() => {
  getDataInfo();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }
}
</style>
